<template>
    <div class="subhead">
        <h2 class="subtitle">{{ title }}</h2>
        <span class="back" v-if="back" @click="goback">
            <el-icon>
                <CaretLeft />
            </el-icon>
        </span>
    </div>
</template>

<script setup lang="ts">
import { CaretLeft } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const goback = () => {
    router.go(-1)
}
const props = defineProps({
    title: {
        type: String,
        default: ''
    },
    back: {
        type: Boolean,
        default: true
    }
})
</script>

<style lang="scss" scoped>
.subhead {
    display: flex;
    align-items: center;

    .subtitle {
        color: #f50;
        font-size: 24px;
        cursor: pointer;
        line-height: 26px;
    }

    .back {
        font-size: 24px;
        color: #f50;
        cursor: pointer;
        display: block;
        margin-top: 8px;
        margin-left: 8px;
    }
}
</style>
